<template>
    <com-search v-if="searchConfig && (searchConfig.search || searchConfig.topBtn)" @search="searchFn" :config="searchConfig"></com-search>

    <el-table class="mtabdl mtabdl_ops" v-loading="loading" :data="tableData" @selection-change="handleSelectionChange" :row-key="tableConfig.rowKey || 'id'" ref="oppod">
        <el-table-column v-if="tableConfig.selection" :reserve-selection="true" type="selection"></el-table-column>
        <el-table-column :class="[el.type == 'tool' ? 'cx_01' : '']" v-for="(el, index) in tableConfig.list" :width="el.width" :fixed="el.fixed" :sortable="el.sortable" :key="index" :prop="el.prop" :label="el.label">
            <template v-slot="scope">
                <div class="tableBtns" v-if="el.type == 'tools'">
                    <span :class="el2.cls" v-for="(el2, index2) in el.backBtns ? el.backBtns(scope.row) : el.btns" :key="'bt_' + index2" @click="el2.clickFn && el2.clickFn(scope.row)"><slot :name="el2.slot" />
                        {{ el2.label }}
                    </span>
                </div>
                <div v-else-if="el.type == 'component'">
                    <component v-bind:is="el.component" :config="el" v-model:comdata="scope.row"></component>
                </div>
                <div v-else-if="el.type == 'switch'" class="ws-poe1">
                    <el-switch v-model="scope.row[el.prop]" active-color="#13ce66" :active-value="1" :inactive-value="0" inactive-color="#ff4949"></el-switch>
                    <div class="ws-poe2"></div>
                </div>
                <span v-else-if="el.type === 'html'" @click="el.clickFn ? el.clickFn(scope.row) : el.iscopy ? onCopy(el.coypeback(scope.row)) : ''" v-html="el.clfn(scope.row)"></span>
                <span v-else :class="el.cls">{{ el.clfn ? el.clfn(scope.row) : scope.row[el.prop] }}</span>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination class="mypaged" v-if="tableConfig.pagination != 'none' && total !== 0" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" v-model:current-page="page" background v-model:page-size="limit"
        :page-sizes="pageSizes" :total="total" layout="slot, prev, pager, next,sizes">
        <span style="margin-right: 12px">共{{ total }}条</span>
    </el-pagination>
    <component @close="closeFn" :componentCofig="componentCofig" :is="ComponentName" v-model:comdata="componentData"></component>
</template>

<script>
import comSearch from "@/components/ComSearch.vue"
import "element-plus/es/components/table/style/css"
import { ElTable, ElMessage } from "element-plus"
import "element-plus/es/components/message/style/css"
import { computed, onMounted, ref, shallowRef } from "vue"
import api from "@/api"
import { useRoute } from "vue-router"
import useClipboard from "vue-clipboard3"

export default {
    components: { comSearch, ElTable },
    props: {
        searchConfig: Object,
        tableConfig: Object,
        componentCofig: Object
    },

    setup(prop, { expose, emit }) {
        const loading = ref(false)

        const tableData = ref([])
        const tableDataSelection = ref([])
        let total = ref(1)

        const sree = ref({})
        const onSree = ref({})

        const route = useRoute()
        const ComponentName = shallowRef("")
        const componentData = ref({})
        let page = ref(1)
        let limit = ref(20)
        const pageSizes = ref([20, 60, 100])

        /*初始化默认搜索参数*/
        if (prop.searchConfig && prop.searchConfig.search) {
            prop.searchConfig.search.map((e) => {
                if (e.default) {
                    sree.value[e.prop] = e.default
                }
            })
        }
        const { toClipboard } = useClipboard()
        const onCopy = (msg) => {
            toClipboard(msg)
            ElMessage('复制成功')
        }
        const onError = () => {

        }
        let topNav = computed(() => {
            return route.meta.breadList || []
        })

        onMounted(() => {
            if (!prop.tableConfig.url) {
                return
            }
            getData()
        })

        const clSreeParam = (ref) => {
            onSree.value = { ...ref }
            if (!prop.searchConfig) { return }
            prop.searchConfig.search.map((e) => {
                if (e.clfn) {
                    e.clfn(onSree.value)
                }
            })
        }

        // table数据
        const getData = () => {
            clSreeParam(sree.value || {})
            let param = Object.assign({}, prop.tableConfig.pr || {}, onSree.value, {
                page: page.value,
                limit: limit.value,
            })

            if (prop.tableConfig.ispush && prop.tableConfig.ispush(param)) {
                return
            }

            loading.value = true
            api[prop.tableConfig.url](param).then((res) => {
                loading.value = false
                total.value = res.total
                if (prop.tableConfig.clfn) {
                    tableData.value = prop.tableConfig.clfn(res.data)
                    return
                }
                tableData.value = res.data

            }).catch(() => {
                loading.value = false
            })
        }
        const handleSizeChange = (val) => {
            limit.value = val
            page.value = 1
            getData()
        }
        const handleCurrentChange = (val) => {
            page.value = val
            getData()
        }
        const searchFn = (ref) => {
            emit("search", "")
            page.value = 1
            sree.value = { ...ref.value }
            getData();
        }
        const clerfn = () => {
            sree.value = {}
        }
        const setScree = (da) => {
            for (let key in da) {
                sree.value[key] = da[key]
            }
        }
        const showFn = (n, o) => {
            ComponentName.value = n
            componentData.value = o || {}
        }
        const closeFn = (n) => {
            showFn("");
            emit("close", n || "")
            if (n == "sx") {
                getData()
            }
        }
        const clfind = (da) => {
            da.clickFn && da.clickFn()
        }
        const handleSelectionChange = (val = []) => {
            tableDataSelection.value = val
        }
        expose({
            showFn,
            setScree,
            sree,
            onSree,
            getData,
            searchFn,
            tableDataSelection,
        })
        return {
            topNav,
            loading,
            tableData,
            total,
            page,
            limit,
            pageSizes,
            sree,
            handleSizeChange,
            handleCurrentChange,
            clerfn,
            ComponentName,
            componentData,
            showFn,
            closeFn,
            clfind,
            tableDataSelection,
            handleSelectionChange,
            searchFn,
            onCopy,
            onError
        }
    }
}
</script>

<style>
.tableBtns {
    color: #28a4ff;
}

.tableBtns>span {
    cursor: pointer;
}
</style>